<template>
    <!-- 添加或修改对话框 -->
    <el-dialog title="流程选择" v-model="open" width="500px" append-to-body draggable align-center>
        <div class="wf-wrapper">
            <div class="wf-item" @click="handleSelect">
                案例
            </div>
        </div>
        <template #footer>
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
const open = ref(false);
const selectedFlow = ref();
const emits = defineEmits(["confirm"])


const show = () => {
    open.value = true;
}

//取消弹窗
const cancel = () => {
    open.value = false;
}

const handleSelect = () => {
    selectedFlow.value = 0;
}

//确认流程
const handleConfirm = () => {
    emits("confirm", selectedFlow.value);
    open.value = false;
}

defineExpose({ show });

</script>

<style lang="scss" scoped>
.wf-wrapper {
    display: flex;
    gap: 20px;

    .wf-item {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        gap: 5px;
        padding: 10px;
        background-color: #f9f9f9;
        border-radius: 5px;
        color: black;
        cursor: pointer;
    }
}
</style>